<template name="topswiper">
	<div class="swiper">
		<swiper
			:indicator-dots='true'
			indicator-color="#e7e97d"
			indicator-active-color="#ccc"
			:autoplay='true'
			:interval="6000"
			:duration='1000'
			:circular='true'
		>
			<div v-for="(top,imgindex) in imgUrl" :key="imgindex">
				<swiper-item>
					<img 
						class="slide-image"
						mode='aspectFit'
						v-for='img in top'
						:src="img.image"
						:key="img.id"
						@click="bookDetail(img)"
					>
				</swiper-item>
			</div>
		</swiper>
	</div>
</template>
<script>
	export default{
		props:['tops'],
		computed:{
			imgUrl(){
				let res = this.tops
				return [res.slice(0,3),res.slice(3,6),res.slice(6)]
			}
		},
		methods:{
			bookDetail(item){
				wx.navigateTo({
					url:'/pages/detail/main?id='+item.id
				})
			}
		}
	}
</script>
<style lang="scss">
	.swiper{
		margin-top:30rpx;
		.slide-image{
			width:33%;
			height:250rpx;
		}
	}
</style>